<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户画像</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-select
            v-model="value"
            clearable
            filterable
            placeholder="请选择用户"
            @change="userChange"
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-card>
    <!-- 图表区域 -->
    <el-card style="margin-top:10px">
      <div class="chartBox">
        <div class="pieChartBox">
          <div id="pie" class="pie">
            <pie-chart :id="pie" :data="pieChartData"></pie-chart>
          </div>
        </div>
        <div class="barChartBox">
          <el-color-picker
            v-model="color"
            @active-change="colorChange"
            show-alpha
          ></el-color-picker>
          <div id="bar" ref="bar">
            <bar-chart
              :color="color"
              :id="bar"
              :data="barChartData"
              ref="barChart"
            ></bar-chart>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import pieChart from '../chart/PieChart'
import barChart from '../chart/BarChart'
// import lineChart from './components/LineChart'
export default {
  components: {
    pieChart,
    barChart
    // lineChart
  },
  data() {
    return {
      userList: '',
      color: 'rgba(19, 206, 102, 0.8)',
      value: '',
      pie: 'pie',
      pieChartData: {
        title: '用户画像',
        datas: [],
        legend: []
      },
      bar: 'bar',
      barChartData: {
        name: '方量情况统计图',
        datas: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
        month: []
      }
    }
  },
  created() {
    this.getUserName()
  },
  methods: {
    // 改变颜色
    colorChange(value) {
      this.color = value
      this.$refs.barChart.barChartInit()
    },
    // 获取用户昵称
    async getUserName() {
      const { data: res } = await this.$http.get('user/getUser', {
        params: { query: '' }
      })
      if (res.status !== 200) return this.$message.error('获取用户名失败')
      this.userList = res.data
    },
    // 下拉框用户改变
    async userChange(val) {
      // 获取饼图数据
      const { data: res } = await this.$http.get(
        '/statistics/getDataByName' + '/' + val
      )
      if (res.code !== 200) return this.$message.error('获取数据失败')
      const pieDatasArr = []
      res.data.forEach(item => {
        pieDatasArr.push({
          value: item.statistics_buy_num,
          name: item.statistics_category_name
        })
      })
      this.pieChartData.datas = pieDatasArr
      console.log(res.data)
      console.log(this.pieChartData.datas)
      // 获取分类数据
      const { data: resCate } = await this.$http.get('/category/getCategory')
      if (resCate.status !== 200) return this.$message.error('获取分类失败')
      const cateArr = []
      resCate.data.forEach(item => {
        cateArr.push(item.category_name)
      })
      this.pieChartData.legend = cateArr
      console.log(this.pieChartData.legend)
      // 获取每月购买本数
      const bookNum = []
      for (let i = 0; i < 12; i++) {
        bookNum[i] = 0
      }
      res.data.forEach(item => {
        if (bookNum[item.statistics_buy_month - 1] !== 0) {
          bookNum[item.statistics_buy_month - 1] += item.statistics_buy_num
        } else {
          bookNum[item.statistics_buy_month - 1] = item.statistics_buy_num
        }
      })
      this.barChartData.datas = bookNum
      this.barChartData.month = [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10',
        '11',
        '12'
      ]
      console.log(this.barChartData.datas)
    }
  }
}
</script>

<style lang="less" scoped>
.chartBox {
  display: flex;
}
#pie {
  width: 600px;
  height: 500px;
}
#bar {
  width: 800px;
  height: 500px;
}
</style>
